<!--
- Author:  LiShibin.
- Date:    2017/7/4 0004.
- File:    my.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="Topmenu">
        <!--<i class="iconfont icon-shezhi6"><a href=""></a></i>-->
        <h1>个人中心</h1>
        <!--<span>关闭</span>-->
      </div>
      <div class="user_top">
        <i @click="gotoSettingIndex" class="iconfont icon-wode_bianjigerenziliao"></i>
        <div class="user_head"><img :src="memberInfo.member_avatar || '../../assets/images/avatar.png'" alt=""></div>
        <h1>{{memberInfo.member_name}}</h1>
        <p>{{memberInfo.member_mobile}}</p>
        <p>福建·福州</p>
        <h2>
          <span v-if="memberInfo.level == '0' || !memberInfo.level" @click="goPageUpgradeVip" data-router="upgrade-vip">升级合伙人</span>
          <span v-else>淘只合伙人</span>
        </h2>
      </div>
      <div class="u_order_cont">
        <div class="user_order">
          <p>我的订单<router-link :to="{name: 'order-list'}"><span>查看全部订单<i class="iconfont icon-more"></i></span></router-link></p>
          <ul>
            <li @click="gotoOrderListByType(1)">
              <i class="iconfont icon-wode_daifukuan_weixuanzhong1"></i>
              <p>待付款</p>
            </li>
            <li @click="gotoOrderListByType(2)">
              <i class="iconfont icon-wode_daifahuo_weixuanzhong1"></i>
              <p>待发货</p>
            </li>
            <li @click="gotoOrderListByType(3)">
              <i class="iconfont icon-wode_daishouhuo_weixuanzhong1"></i>
              <p>待收货</p>
            </li>
            <li @click="gotoRefundList">
              <i class="iconfont icon-wode_shouhouguanli1"></i>
              <p>售后管理</p>
            </li>
          </ul>
        </div>
      </div>

      <div style="margin-top: 4.4rem;" class="usedlist">
        <ul>
          <li >常用功能</li>
          <li @click="gotoMemberDetails" data-router="member-details">我的余额
            <i class="iconfont icon-more"></i><span class="riqi">{{memberInfo.balance}}</span>
          </li>
          <li @click="gotoAddressList" data-router="address-list">管理收件人<i class="iconfont icon-youjiantou-copy"></i></li>
          <li @click="gotoMemberGuarantee" data-router="member-guarantee">正品保障<i class="iconfont icon-youjiantou-copy"></i></li>
        </ul>
      </div>
      <!--<div class="usedlist">-->
        <!--<ul>-->
          <!--<li >淘只解答</li>-->
          <!--<li>拿货须知<i class="iconfont icon-youjiantou-copy"></i></li>-->
          <!--<li>销售问答<i class="iconfont icon-youjiantou-copy"></i></li>-->
        <!--</ul>-->
      <!--</div>-->
      <div class="usedlist">
        <ul>
          <li @click="gotoSettingAdvice" data-router="setting-advice">意见反馈<i class="iconfont icon-youjiantou-copy"></i></li>
        </ul>
      </div>
      <div class="usedlist">
        <ul>
          <li @click="gotoMemberNovice">新手入门<i class="iconfont icon-youjiantou-copy"></i></li>
        </ul>
      </div>
      <div class="usedlist">
        <ul>
            <li @click="gotoSettingIndex">设置<i class="iconfont icon-youjiantou-copy"></i></li>
        </ul>
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: 'memberInfo'})
    ],
    beforeRouteEnter (to, from, next) {
      next()
    },
    data() {
      return {
        countList: []
      }
    },
    components: {},
    created() {
      this.$request.getAdvList()
      this.getCountList()
    },
    methods: {
      gotoSettingAdvice() {
        this.$router.push({name: 'setting-advice'})
      },
      gotoAddressList() {
        this.$router.push({name: 'address-list'})
      },
      gotoMemberDetails() {
        this.$router.push({name: 'member-details'})
      },
      gotoSettingIndex() {
        this.$router.push({name: 'setting-index'})
      },
      goPageUpgradeVip(evt) {
        // var routeName = evt.target.getAttribute('data-router')
        // if (routeName) {
        this.$router.push({name: 'upgrade-vip'})
        // }
      },
      showMemberLtegral() {
        this.$router.push({name: 'member-integral'})
      },
      showMemberBalance() {
        this.$router.push({name: 'member-balance'})
      },
      gotoInvitedMember() {
        this.$router.push({name: 'invited-member'})
      },
      gotoNoticeList() {
        this.$router.push({name: 'notice-list'})
      },
      gotoOrderListByType(type) {
        this.$router.push({name: 'order-list', query: {type: type}})
      },
      gotoRefundList() {
        // this.$toast('功能尚未开放')
        // return
        this.$router.push({name: 'refund-list', query: {type: this.$dictionary.refundType.money}})
      },
      gotoMemberNovice() {
        this.$router.push({name: 'member-novice'})
      },
      gotoMemberGuarantee() {
        this.$router.push({name: 'member-guarantee'})
      },
      getCountList() {
        this.$request.getCountList().then(data => {
          this.countList = data
        })
      }
    }
  }
</script>

<style>
  .user_top{z-index: auto !important;}
  .u_order_cont{position: relative;}
  .u_order_cont .user_order{position: absolute;left: 0;right: 0;margin: auto;top: -1.25rem;}
</style>
